<template>
  <div class="mobile-data">
    <div class="add-new-task" v-if="showAdd">
      <IconAirport2
        @click="onClickPublishBtn"
        class="svg-icon"
        fill="var(--yd-primary-color)"
      >
      </IconAirport2>
    </div>
    <div class="mobile-task-list" v-if="data && data.length > 0">
      <div class="mobile-task-item" v-for="item in data" :key="item.id">
        <div class="task-header">
          <div class="title">
            <span>{{ $t("tag.task") }}ID:</span>
            <span>{{ item.task_no }}</span>
          </div>
          <div>
            <div
              class="status success"
              v-if="item.status == 3 || item.status == 4"
            >
              {{ item.status_title }}
            </div>
            <div
              class="status danger"
              v-if="item.status == 1 || item.status == 2"
            >
              {{ item.status_title }}
            </div>
          </div>
        </div>
        <div class="divider-line"></div>
        <div class="task-title">
          {{ item.title }}
        </div>
        <div class="detail">
          <div>
            <div class="publisher">
              <div class="label">{{ $t("table.profile_task.col_2") }}</div>
              <div class="value">
                {{ item.publisher }}
              </div>
            </div>
            <div class="time">
              <div class="label">{{ $t("table.profile_task.col_4") }}</div>
              <div class="value">
                {{ item.time }}
              </div>
            </div>
          </div>
          <div>
            <div
              v-if="item.status == 3 || allocate"
              class="btn"
              @click="followUp(item)"
            >
              <template v-if="allocate">
                <span>{{ $t("btnText.allocate") }}</span>
              </template>
              <template v-else>
                <span v-if="item._rawData.receive_id == profile?.id">{{
                  $t("btnText.follow_up")
                }}</span>
                <span v-else>{{ $t("btnText.replay") }}</span>
              </template>
            </div>
            <div v-else style="visibility: hidden">
              <span>-</span>
            </div>
            <div class="detail-btn" @click="getTaskDetailData(item.id)">
              <span>{{ $t("tag.task") + $t("btnText.detail") }}</span>
              >>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template v-if="!data">
      <div class="mobile-skeleton">
        <div class="mobile-skeleton-inner">
          <div class="mobile_inner" v-for="i in 6" :key="i">
            <Skeleton width="40%" gap-skeleton mobile></Skeleton>
            <Skeleton :rows="2" gap-skeleton mobile></Skeleton>
          </div>
        </div>
      </div>
    </template>
    <NoData v-if="data && data.length == 0" />
  </div>
</template>

<script setup lang="ts">
import { useMemberStore } from "../../../../store";

const { profile } = useMemberStore();

type Props = {
  data: any[];
  showAdd?: boolean;
  allocate?: boolean;
};

defineProps<Props>();

const emits = defineEmits(["getTaskDetailData", "followUp", "publishTask"]);
const getTaskDetailData = async (id: number) => {
  emits("getTaskDetailData", id);
};

const followUp = (item: any) => {
  let type = "followUp";
  if (item._rawData.member_id == profile?.id) {
    type = "replay";
  }
  emits("followUp", item, type);
};

const onClickPublishBtn = () => {
  emits("publishTask");
};
</script>
<style scoped lang="less">
.btn {
  padding: 0;
  padding: 18px 50px;
  background-color: #3978be;
  color: #fff;
}
// 移动端布局
.mobile-data {
  display: none;
  flex: 1;
  .mobile-task-list {
    height: 100%;
    margin-left: -82px;
    margin-right: -82px;
    background-color: #f6f8fa;
    display: flex;
    padding: 0 82px;
    flex-direction: column;
    gap: 123px;
    .mobile-task-item {
      &:first-child {
        margin-top: 123px;
      }
      padding: 82px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      .task-header {
        gap: 61px;
        display: flex;
        gap: 41px;
        justify-content: space-between;
        .title {
          display: flex;
          align-items: center;
          font-size: 72px;
          color: #172026;
        }
        .status {
          span {
            display: inline-block;
            padding: 20px 41px;
            border-radius: 31px;
            font-size: 61px;
            white-space: nowrap;
            &.success {
              background: rgba(54, 217, 108, 0.1);
              color: #36d96c;
            }
            &.error {
              color: #ff4060;
              background: rgba(255, 64, 96, 0.1);
            }
          }
        }
      }
      .task-title {
        font-size: 82px;
      }
      .publish_time {
        font-size: 61px;
      }
      .detail {
        display: flex;
        gap: 20px;
        margin-top: 50px;
        & > div {
          display: flex;
          flex-direction: column;
          gap: 50px;
          flex: 1;
          &:last-child {
            align-items: flex-end;
          }
          & > div {
            flex: 1;
            display: flex;
            align-items: center;
            font-size: 61px;
            gap: 41px;
            .label {
              color: #70818c;
              white-space: nowrap;
            }
          }
          .detail-btn {
            gap: 0;
            color: #7ad2dc;
          }
        }
      }
      .divider-line {
        margin: 61px 0;
      }
      .footer {
        display: flex;
        align-items: center;
        justify-content: space-around;
        .split {
          color: #ccd6de;
        }
        .btn {
          font-size: 72px;
          display: flex;
          align-items: center;
          gap: 10px;
          svg {
            position: relative;
            top: 2px;
            width: 102px;
            height: 102px;
          }
        }
      }
    }
  }
}
.add-new-task {
  position: fixed;
  bottom: 200px;
  right: 150px;
  z-index: 9;
  display: none;
  border-radius: 50%;
  .svg-icon {
    width: 200px;
    height: 200px;
  }
}
@media screen and (max-width: 768px) {
  .mobile-data,
  .add-new-task {
    display: block;
  }
}
</style>
